<template>
  <div>
    <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      activeKey: '',
    }
  },
  computed: {
    panes: () => {
      return [
        {
          key: '1',
          title: 'tab1',
          closable: true,
        },
        {
          key: '2',
          title: 'tab2',
          closable: true,
        },
        {
          key: '3',
          title: 'tab3',
          closable: true,
        },
      ]
    },
  },
  mounted() {
    this.activeKey = this.$route.fullPath
  },
  methods: {
    onEdit(key) {
      this.$log('on tab close' + key)
    },
  },
}
</script>
<style></style>
